<template>
  <div>
    <div class="address-bolck" v-for="(location,index) in locations">
      <div @click='selectAddress(index)'>
        <div class="address-icon">
          <a class="icon iconfont icon-weizhi"></a>
        </div>
        <div class="icon-right">
          <a class=" icon iconfont icon-dayuhao"></a>
        </div>
        <div class="vux-cell-box address">
          <p>
            <span class="name">{{location.name}}</span>
            <span class="tel">{{location.phone}}</span>
            <a class="default" v-show="location.isDefault">默认</a>
          </p>
          <p class="addressP">{{location.placeA}} {{location.placeB}}</p>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <input 
          type="checkbox" 
          v-model="location.isDefault" 
          @click="checkItem(index)" />&nbsp;
          <span v-if='location.isDefault' class="isDefault">默认地址</span>
          <span v-else>设为默认</span>
        </div>
        <div class="right">
          <router-link 
          :to="{name:'newaddress', query : {title:'编辑收货地址'}}" 
          @click.native='editor(index)'>
            <span>编辑</span>
          </router-link>
          <span @click="deleteItem(index)">删除</span>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      locations: [],
      isShow: '',
      checkValue: false
    }
  },
  methods: {
    deleteItem (index) {
      this.locations.splice(index, 1)
    },
    checkItem (index) {
      this.locations.forEach((value, indexs) => { // 设为默认
        value.isDefault = false
        if (index === indexs) {
          value.isDefault = true
        }
      })
    },
    editor (index) {
      this.$store.commit('editorAddress',index+1)
    },
    selectAddress(index){
      this.editor(index)
      this.$router.back()      
    }
  },
  mounted () {
    this.$store.state.addressData().then(data => {
      this.locations = data
    })
  }
}
</script>

<style scoped>
.addressP {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.address {
  padding: 1rem 1rem 1rem 2.5rem;
  font-size: 1rem;
}
.default {
  padding: 1px 5px;
  font-size: 0.5rem;
  border: 1px solid red;
  color: red;
}

.m-1-t {
  margin-top: -1.3em;
}
.address-icon {
  display: inline-block;
  float: left;
  padding-left: 10px;
  padding-top: 30px;
}
.icon-right {
  float: right;
  display: inline-block;
  padding-right: 10px;
  padding-top: 30px;
}
.address-bolck {
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
a {
  color: #333;
}
.bottom {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  border-top: 2px solid #f0f0f0;
  border-bottom: 10px solid #f0f0f0;
}
.bottom .left,
.bottom .right {
  float: left;
  width: 50%;
}
.bottom .left input {
  margin-left: 10px;
}
.bottom .right {
  text-align: right;
}
.bottom .right span {
  margin-right: 10px;
}
.isDefault {
  color: red;
}
</style>
